<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='code'>
    </div>
    <script id='template-head' type="text/template">
        <h3 on-click='this.handlerClick'>{this.state.value}</h3>
    </script>

    <script src="template.js"></script>
    <script>

        //带构造函数的对象继承
        function Extend(Parent, Child) {
            var F = function () { }; //声明一个空类
            F.prototype = Parent.prototype; //这个类的 prototype 指向 父类的 prototype
            Child.prototype = new F(); //创建空类的对象，并将空类对象赋值给 子类的 prototype
            Child.prototype.constructor = Child; //将子类的构造函数改回自身的构造函数（指向父类的 ptotitype 的时候，被改为父类的构造函数了）
            Child.uper = Parent.prototype; //添加一个指向父类的属性
            return Child;
        }
        //基础组件
        var BaseComponent = function (props) {

            this.state = { value: props.value };
            this.element = null;

            if (typeof Head._inited_ == "undefined") {

                //返回 html
                BaseComponent.prototype.render = function () {

                }
                //更新 state
                BaseComponent.prototype.setState = function (obj) {
                    for(var key in obj)
                    {
                        this.state[key]=obj[key];
                    }
                    //更新 element
                    var tempnode = this.getElement();
                    this.element.parentNode.replaceChild(tempnode,this.element); 
                    this.element = tempnode;
                }

                //渲染（返回dom）
                BaseComponent.prototype.getElement = function () {

                    var templatecontent = this.render();
                    var func = JSTemplate.getFunc(templatecontent)
                    var html = func.call(this, this, props);

                    var container = document.createElement("div");
                    container.innerHTML = html;
                    var child = container.children[0];
                    var attrnames = child.getAttributeNames();
                    for (var key in attrnames) {
                        var name = attrnames[key];
                        if (name.indexOf("on-") > -1) {
                            var attrvalue = child.getAttribute(name);
                            //TODO添加事件监听
                            /*
                                将 this.去掉，然后根据值的层次，一层一层的往下取目标 事件处理方法
                            */
                            attrvalue = attrvalue.replace("this.", "");
                            var func = this;
                            var fninfo = attrvalue.split('.')
                            for (var fnkey in fninfo) {
                                var fnname = fninfo[fnkey];
                                var func = func[fnname];
                            }
                            if (typeof func == 'function') child.addEventListener("click", func)

                            child.removeAttribute(name)
                        }
                    }
                    return child;
                }

                //渲染（返回dom）
                BaseComponent.prototype.handerRender = function () {

                    this.element = this.getElement();
                    return this.element;
                }
                BaseComponent._inited_ = true;
            }
        }


        var Head = Extend(BaseComponent, function (props) {
            BaseComponent.call(this, props);
            if (typeof Head._inited_ == "undefined") {

                //事件监听
                Head.prototype.handlerClick = function () {
                    console.log(this);
                    this.setState({value:new Date().getTime()})
                }

                //覆盖获取模板内容的方法
                Head.prototype.render = function () {
                    var templatecontent = document.getElementById("template-head").innerHTML;
                    return templatecontent
                }
                Head._inited_ = true;
            }

            this.handlerClick = this.handlerClick.bind(this);

        }); //继承 基础组件

        debugger
        var root = document.getElementById("code");
        var head = new Head({ value: "1234567" });
        var html = head.handerRender();
        root.appendChild(html);

    </script>
</body>

</html>